<template>
<!--独家放送-->
  <div class="div3" v-if="info">
      <ul>
          <li v-for="(val,index) in info.result" :key="index" :style='{transform:"translateX("+juli+"px)"}'><img :src="val.picUrl" alt="" width="100%"></li>
      </ul>
  </div>
</template>

<script>
import require from "requests/recommend";
export default {
    name:'div3',
    data(){
        return {
            info:null,
            juli:0
        }
    },
    methods:{
        getBroadcast(){
            require.broadcast().then(res=>{
                this.info=res.data
            })
        },
        changIndex(){
            setInterval(()=>{
            var number=this.juli/-700
            if(number==this.info.result.length-1){
                this.juli=0
            }else{
                this.juli=this.juli-700
            }
        },3000)
        }
    },
    mounted(){
        this.getBroadcast()
        this.changIndex()
    }
}
</script>

<style lang="less" scoped>
.div3{
    ul{
        padding: 0;
        display: flex;
        flex-wrap: nowrap;
        overflow: hidden;
        width: 700px;
        margin: 0 auto;
        li{
            width:100%;
            flex: none;
            transition:all 1s;
            //transform: translateX(-700px);
        }
    }
}
</style>